<template>
	<div style="width: 100%; height:100%;display: flex;">
		<div class="left-wraper" :class="{'collapse':isCollapse}">
			<!--顶部logo-->
			<div style="text-align: center; border-bottom:2px solid #464646">
				<router-link to="/admin/dashboard">
					<img src="@/assets/logo.png" />
				</router-link>
			</div>

			<!--左侧导航-->
			<div class="menu-wraper">
				<el-menu :default-active="activeMenu" background-color="#2C3E50" text-color="#fff" :unique-opened="true"
					active-text-color="#55aaff">
					
					<div v-for="(item,index) in menus" :key="item.mid">
						<router-link :to="item.path" v-if="item.children.length==0" >
							<el-menu-item :index="item.key">
								<i class="el-icon-menu"></i>
								<span slot="title">{{item.title}}</span>
							</el-menu-item>
						</router-link>
						
						<el-submenu :index='item.key' v-if="item.children.length>0">
							<template slot="title">
								<i class="el-icon-lock"></i>{{item.title}}</template>
								
							<router-link :to="subitem.path" v-for="(subitem,subindex) in item.children" :key="subitem.mid">
								<el-menu-item :index="subitem.key"><i class="el-icon-user"></i>{{subitem.title}}
								</el-menu-item>
							</router-link>	
							
						</el-submenu>
					</div>
				</el-menu>
				

				
			</div>
			<div style="color: #9c9c9c; text-align: center; padding-top: 5px;">
				&copy; 2025 北京安之谷科技
			</div>
		</div>
		<!--右侧内容-->
		<div class="right-wraper">
			<div class="toolbar-wraper">
				<div @click="isCollapse=!isCollapse"
					style="width: 30px; height: 30px;  margin: 0px 5px; font-size: 20px; text-align: center; cursor: pointer;"
					:title="isCollapse==true?'显示导航菜单':'隐藏导航菜单'">
					<i class="el-icon-s-fold" v-if="!isCollapse"></i>
					<i class="el-icon-s-unfold" v-if="isCollapse"></i>
				</div>
				<div style="padding:15px 15px;">
					<el-breadcrumb separator="/">
						<transition-group name="breadcrumb">
							<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
								<span v-if="item.redirect==='noRedirect'||index==levelList.length-1">{{ item.meta.title }}</span>
								<a :href="item.redirect" v-else>{{ item.meta.title }}</a>
							</el-breadcrumb-item>
						</transition-group>
					</el-breadcrumb>
				</div>
				<div style="flex: 1;"></div>
				<!--右侧头像-->
				<div style="margin-right: 20px; display: flex;">
					<div style="display: flex;">
						<el-dropdown trigger="click" style="cursor: pointer;" @command="handleCommand">
							<div class="el-dropdown-link" style="display: flex;">
								<el-avatar size="small" style="margin: 10px;border: 1px solid #999;"
									src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
								</el-avatar>
								<span v-if="userinfo.nickname">{{userinfo.nickname}}<i
										class="el-icon-arrow-down el-icon--right"></i></span>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="profile">
									<div style="padding: 5px 10px;">
										<i class="el-icon-setting"></i>账号设置
									</div>
								</el-dropdown-item>
								<el-dropdown-item command="logout">
									<div style="padding: 5px 10px;">
										<i class="el-icon-switch-button"></i>退出登录
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
			<div style="padding: 15px 10px; overflow-y: auto;">
				<!--主内容区域-->
				<transition name="fade" mode="out-in">
					<router-view></router-view>
				</transition>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "layout",
		data() {
			return {
				activeMenu: 'admin-dashboard',
				isCollapse: false,
				levelList: null,
				role: '',
				userinfo: {},
				account: '',
				accounts: [],
				menus:[],
			}
		},
		mounted() {
			var uinfo = JSON.parse(localStorage.getItem("userinfo"));
			if (uinfo) {
				this.userinfo = uinfo;
			} else {
				//this.$router.push("/admin/login");
			}
			
			this.menus=JSON.parse(localStorage.getItem("menus"));
			
		},
		methods: {
			getBreadcrumb() {
				let matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
				const first = matched[0];
				document.title=this.$router.currentRoute.meta && this.$router.currentRoute.meta.title;
				this.activeMenu = this.$router.currentRoute.name;
				this.levelList = matched.filter((item) => item.meta);
			},
			handleCommand(cmd) {
				switch (cmd) {
					case "logout":
						this.$confirm("确定要退出登录吗？").then(() => {
							localStorage.clear();
							this.$router.push("/admin/login");
						}).catch(() => {

						})
						break;
				}
			},
			handleLink(item) {

			}
		},
		created() {
			this.getBreadcrumb();
		},

		watch: {
			$route() {
				this.getBreadcrumb();
			}
		}

	}
</script>

<style scoped>
	.left-wraper {
		width: 180px;
		background-color: #2C3E50;
		color: #D0D0D0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
		transition-property: width, height, transform, background, font-size;
		transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	}

	.collapse {
		width: 0px;
		-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
		transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	}

	.menu-wraper {
		overflow-x:hidden;
		height:calc(100vh - 100px);
	}
	.menu-wraper::-webkit-scrollbar {
		width: 0px;
	}
	.el-menu {
		border: none;
	}

	.el-menu-item {
		height: 45px;
		line-height: 45px;
	}

	.el-menu-item,
	>>>.el-submenu__title {
		height: 45px;
		line-height: 45px;
	}

	.el-menu-item.is-active {
		color: #FFFFFF !important;
		background-color: #0080FF !important;
	}

	.right-wraper {
		flex: 1;
		display: flex;
		background-color: #EEEEEE;
		height: 100vh;
		flex-direction: column;
		overflow: hidden;
	}

	.toolbar-wraper {
		height: 45px;
		background-color: #fff;
		flex: 0 0 auto;
		line-height: 45px;
		box-sizing: border-box;
		-webkit-box-shadow: 2px 14px 12px 0 rgba(0, 0, 0, .1);
		box-shadow: 2px 14px 12px 0 rgba(0, 0, 0, .1);
		border-bottom: 1px solid #dcdfe6;
		display: flex;
	}
</style>